<template>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="navbar-header">
          <!-- 图标 go-->
          <div class="logo">
            <a>
              <img
                src="/img/惠农信息服务一点通.png"
                style="padding-bottom: 5px;"
              />
            </a>
          </div>
          <div style="height:20px;"></div>
          <!-- 图标 end-->
          <div class="nav-menu">
            <template v-for="(item, index) in navMenu">
              <!-- TODO -->
              <!-- <div class="nav-menu-item" v-if="item.children" :key="index">
                <a href="">{{ item.title }}</a>
                <div>

                </div>
              </div>
              <div class="nav-menu-item" :key="index" v-else>
                <a href="">{{ item.title }}</a>
              </div> -->
              <div class="nav-menu-item" :key="index">
                <router-link :to="item.to" tag="a">
                  {{ item.title }}
                </router-link>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      navMenu: [
        { title: '首页', to: '/' },
        { title: '种植信息', to: '/zhongzhixinxi' },
        { title: '养殖信息', to: '/yangzhixinxi' },
        {
          title: '市场信息',
          to: '/shichangxinxi',
          children: [
            { title: '产品供应', to: '/aa' },
            { title: '产品求购', to: '/aa' },
            { title: '绿化苗木', to: '/aa' },
            { title: '农业价格监测', to: '/aa' },
            { title: '土地流转', to: '/aa' }
          ]
        },
        { title: '生活信息', to: '/shenghuoxinxi' },
        { title: '用工信息', to: '/yonggongxinxi' },
        { title: '政策法规', to: '/zhengcefagui' },
        { title: '意见反馈', to: '/yijianfankui' }
      ]
    }
  }
}
</script>

<style lang="scss">
.header {
  //导航背景
  min-height: 60px;
  background: url('/img/惠农导航条背景.jpg') no-repeat right center;
  height: 130px;
  // 内容
  .container {
    margin: 0 auto;
    padding: 0 0.9375rem;
    width: 1200px !important;
    .row {
      margin: 0 -0.9375rem;
      .navbar-header {
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        float: left !important;
        // 图标
        .logo {
          margin-top: 10px;
          margin-left: 0;
          a {
            height: 60px;
            img {
              box-sizing: border-box;
              vertical-align: middle;
              border: 0;
              max-height: 50px;
              padding-bottom: 5px;
            }
          }
        }

        .nav-menu {
          height: 50px;
          background: rgba(9, 143, 79, 0.8);
          width: 1200px;
          padding: 0 !important;

          .nav-menu-item {
            display: inline-block;
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            a {
              color: #ffffff;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
